<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>
      html, body {
        background-color: #f8f8f8;
      }
    </style>
  </head>
  <body>
    <h1>El Grapho Big Randomized Hairball Graph</h1>
    <div id="container"></div>

    <script src="../engine/dist/ElGrapho.js"></script>
    <script>
let NUM_LEVELS = 7;
let MAX_LEVEL_MULTIPLIER = 5;

let model = {
  nodes: [],
  edges: []
};

let edgeIndex = 0;
let levels = [];
let n = 0;
let nodeGroups = {};
let groupIndex = 1;

for (let j=0; j<NUM_LEVELS; j++) {
  levels[j] = [];

  if (j === 0) {
    let group = 0;
    model.nodes[n] = {
      group: group
    };
    nodeGroups[n] = group;
    levels[j].push(n);
    n++;
  }
  else {
    let lastLevel = levels[j-1];
    let lastLevelLen = lastLevel.length;
    let numNodes = lastLevelLen + lastLevelLen * Math.floor(Math.random() * MAX_LEVEL_MULTIPLIER);

    for (let k=0; k<numNodes; k++) {
      let parentIndex = lastLevel[Math.floor(Math.random() * lastLevelLen)];
      model.edges[edgeIndex] = {
        from: parentIndex,
        to: n
      };
      edgeIndex++;

      if (j === 0) {
        group = 0;
      }
      else if (j === 1) {
        group = groupIndex++;
      }
      else {
        group = nodeGroups[parentIndex];
      }

      model.nodes[n] = {
        group: group,
        label: n
      };
      nodeGroups[n] = group;
      levels[j].push(n);
      n++;
    }
  }
}

let graph = new ElGrapho({
  container: document.getElementById('container'),
  model: ElGrapho.layouts.Hairball(model),
  width: 1000,
  height: 500,
  debug: true
});
    </script>


  </body>
</html>